<template name="sideNav">
  <div>
    <template v-for="(item,i) in sideNavList">
      <div
        :key="item.id"
        :class="{'navView':true,'topNav':i == 0}"
        @mousemove="onNavGroup(i)"
        @mouseleave="offNavGroup()"
      >
        <div :class="{'navGroup':true,'isNavGroup':count == item.id}">
          <i class="icon1" :style="{'background-position-y': i * -30 +'px'}"></i>
          <ul class="content">
            <li class="title">{{item.title}}</li>
            <li class="placeGroup">
              <template v-for="(hot,index) in item.hot">
                <a href="javascript:;" class="place" :key="index">{{hot}}</a>
              </template>
            </li>
          </ul>
          <i class="el-icon-arrow-right"></i>
        </div>
        <div
          class="navAll"
          v-show="count == item.id"
          :style="{'height': item.top ? 530 + 'px' : 476 + 'px','top': i * -68 + 'px'}"
        >
          <ul :class="{'top':item.top,'left':!item.top,'center':i == 2,}">
            <template v-for="left in item.letfContentList">
              <li class="list" :key="left.content_id">
                <span class="title">{{left.title}}</span>
                <span class="content">
                  <a
                    href="javascript:;"
                    v-for="(content,index) in left.list"
                    :key="index"
                  >{{content}}</a>
                </span>
              </li>
            </template>
          </ul>
          <ul class="center" v-show="item.three">
            <template v-for="center in item.centerContentList">
              <li class="list" :key="center.content_id">
                <span class="title">{{center.title}}</span>
                <span class="content">
                  <a
                    href="javascript:;"
                    v-for="(content,index) in center.list"
                    :key="index"
                  >{{content}}</a>
                </span>
              </li>
            </template>
          </ul>
          <ul :class="{'top':item.top,'center':i == 2}">
            <template v-for="right in item.rightContentList">
              <li class="list" :key="right.content_id">
                <span class="title">{{right.title}}</span>
                <span class="content">
                  <a
                    href="javascript:;"
                    v-for="(content,index) in right.list"
                    :key="index"
                  >{{content}}</a>
                </span>
              </li>
            </template>
          </ul>
          <div class="special" v-show="item.specialBln">
            <span class="title">精彩专题</span>
            <a href="javascript:;" v-for="special in item.special" :key="special.content_id">
              <span class="name">{{special.name}}</span>
              <span class="introduce">{{special.introduce}}</span>
            </a>
          </div>
        </div>
      </div>
    </template>
  </div>
</template>

<script>
export default {
  name: "sideNav",
  data() {
    return {
      sideNavList: [],
      count: null
    };
  },
  methods: {
    getData() {
      let getSideNavList = [
        {
          id: 0,
          title: "国内旅游",
          top: true,
          three:false,
          specialBln:false,
          hot: ["三亚", "丽江", "厦门", "成都", "西安"],
          letfContentList: [
            {
              content_id: 0,
              title: "热门",
              list: [
                "三亚",
                "丽江",
                "厦门",
                "成都",
                "西安",
                "长白山",
                "北京",
                "大理",
                "桂林"
              ]
            },
            {
              content_id: 1,
              title: "海南",
              list: ["三亚", "亚龙湾", "海口", "蜈支洲岛", "三亚湾", "西沙"]
            },
            {
              content_id: 2,
              title: "云南",
              list: ["丽江", "大理", "昆明", "西双版纳", "腾冲", "香格里拉"]
            },
            {
              content_id: 3,
              title: "四川",
              list: ["成都", "九寨沟", "稻城", "西岭雪山", "峨眉山", "亚丁"]
            },
            {
              content_id: 4,
              title: "西南",
              list: ["西藏", "拉萨", "林芝", "重庆", "贵州", "贵阳", "黄果树"]
            },
            {
              content_id: 5,
              title: "西北",
              list: ["西安", "青海湖", "西宁", "新疆", "敦煌", "乌鲁木齐"]
            },
            {
              content_id: 6,
              title: "东北",
              list: ["长白山", "大连", "哈尔滨", "长春"]
            },
            {
              content_id: 7,
              title: "江浙沪",
              list: [
                "杭州",
                "上海",
                "南京",
                "苏州",
                "乌镇",
                "千岛湖",
                "西塘",
                "横店",
                "无锡",
                "上海迪士尼",
                "舟山"
              ]
            },
            {
              content_id: 8,
              title: "山东",
              list: ["青岛", "烟台"]
            },
            {
              content_id: 9,
              title: "广西",
              list: ["桂林", "北海", "阳朔", "涠洲岛", "龙脊梯田"]
            },
            {
              content_id: 10,
              title: "湖北/湖南",
              list: ["张家界", "长沙", "武汉", "三峡", "神农架", "宜昌"]
            }
          ],
          centerContentList: [],
          rightContentList: [
            {
              content_id: 0,
              title: "福建",
              list: ["厦门", "鼓浪屿", "武夷山", "福州"]
            },
            {
              content_id: 1,
              title: "广东",
              list: ["广州", "珠海", "深圳", "长隆", "佛山", "惠州"]
            },
            {
              content_id: 2,
              title: "内蒙古",
              list: ["呼伦贝尔", "海拉尔", "满洲里"]
            },
            {
              content_id: 3,
              title: "安徽/江西",
              list: ["黄山", "婺源", "庐山", "三清山", "南昌"]
            },
            {
              content_id: 4,
              title: "河北",
              list: ["北戴河", "秦皇岛", "石家庄", "承德"]
            },
            {
              content_id: 5,
              title: "山西",
              list: ["太原", "平遥", "五台山", "壶口瀑布"]
            },
            {
              content_id: 6,
              title: "河南",
              list: ["郑州", "开封", "洛阳", "龙门", "石窟", "少林寺"]
            }
          ],
          special: []
        },
        {
          id: 1,
          title: "日本",
          top: false,
          specialBln:true,
          three:false,
          hot: ["东京", "大阪", "冲绳", "北海道"],
          letfContentList: [
            {
              content_id: 0,
              title: "日本",
              list: [
                "日本",
                "东京",
                "大阪",
                "冲绳",
                "北海道",
                "京都",
                "名古屋",
                "箱根",
                "奈良",
                "福冈",
                "九州",
                "札幌",
                "香川",
                "高松"
              ]
            }
          ],
          centerContentList: [],
          rightContentList: [],
          special: [
            {
              content_id: 0,
              name: "精华推荐",
              introduce: "日本濑户内海的味道"
            }
          ]
        },
        {
          id: 2,
          title: "东南亚 南亚 泰国",
          three:true,
          specialBln:false,
          top: false,
          hot: ["普吉岛", "清迈", "巴厘岛", "马尔代夫"],
          letfContentList: [
            {
              content_id: 0,
              title: "泰国",
              list: [
                "普吉岛",
                "清迈",
                "苏梅岛",
                "曼谷",
                "甲米",
                "芭提雅",
                "象岛"
              ]
            },
            {
              content_id: 1,
              title: "菲律宾|文莱",
              list: ["菲律宾", "长滩岛", "杜马盖地", "薄荷岛", "宿雾", "文莱"]
            }
          ],
          centerContentList: [
            {
              content_id: 0,
              title: "南亚",
              list: ["马尔代夫", "尼泊尔", "印度"]
            },
            {
              content_id: 1,
              title: "印尼|马来|新加坡",
              list: [
                "巴厘岛",
                "马来西",
                "亚沙",
                "巴仙",
                "本那",
                "兰卡威",
                "印度",
                "尼西亚",
                "美娜多",
                "吉隆坡",
                "新加坡",
                "纳闽"
              ]
            }
          ],
          rightContentList: [
            {
              content_id: 0,
              title: "越柬老缅",
              list: [
                "越南",
                "芽庄",
                "柬埔寨",
                "岘港",
                "吴哥窟",
                "缅甸",
                "老挝",
                "胡志明",
                "美奈",
                "大叻",
                "河内",
                "暹粒",
                "金边"
              ]
            }
          ],
          special: []
        },
        {
          id: 3,
          title: "香港 澳门 台湾",
          three:false,
          specialBln:true,
          top: false,
          hot: ["台北", "垦丁", "高雄", "香港", "迪士尼"],
          letfContentList: [
            {
              content_id: 0,
              title: "香港 澳门",
              list: ["香港", "澳门"]
            },
            {
              content_id: 1,
              title: "台湾",
              list: ["台北", "垦丁", "高雄", "花莲", "南投"]
            }
          ],
          centerContentList: [],
          rightContentList: [],
          special: [
            {
              content_id: 0,
              name: "香港自由行全指南",
              introduce: "附3、5、6日完美行程推荐"
            }
          ]
        },
        {
          id: 4,
          title: "欧洲 美洲",
          three:false,
          specialBln:true,
          top: false,
          hot: ["美国", "英国", "法国", "意大利", "德国"],
          letfContentList: [
            {
              content_id: 0,
              title: "欧洲",
              list: [
                "英国",
                "法国",
                "意大利",
                "芬兰",
                "德国",
                "俄罗斯",
                "土耳其",
                "希腊",
                "冰岛",
                "瑞士",
                "西班牙",
                "伦敦",
                "巴黎",
                "圣托里尼",
                "罗马",
                "捷克",
                "奥地利",
                "丹麦",
                "匈牙利",
                "荷兰",
                "普罗",
                "旺斯",
                "比利时",
                "巴塞罗那贝加尔湖",
                "马德里",
                "葡萄牙",
                "波兰",
                "爱尔兰"
              ]
            },
            {
              content_id: 1,
              title: "美洲",
              list: [
                "美国",
                "加拿大",
                "洛杉矶",
                "旧金山",
                "纽约",
                "塞班岛",
                "关岛",
                "夏威夷",
                "黄石公园",
                "阿根廷",
                "西雅图",
                "华盛顿",
                "波士顿",
                "迈阿密",
                "古巴",
                "墨西哥",
                "拉斯维加斯",
                "芝加哥",
                "秘鲁"
              ]
            }
          ],
          centerContentList: [],
          rightContentList: [],
          special: []
        },
        {
          id: 5,
          title: "澳洲 中东 非洲",
          three:false,
          specialBln:true,
          top: false,
          hot: ["澳大利亚", "毛里求斯"],
          letfContentList: [
            {
              content_id: 0,
              title: "澳洲",
              list: [
                "澳大利亚",
                "新西兰",
                "墨尔本",
                "悉尼",
                "奥克兰",
                "悉尼歌剧院",
                "皇后镇",
                "大堡礁",
                "斐济",
                "里斯本",
                "凯恩斯",
                "大溪地",
                "珀斯"
              ]
            },
            {
              content_id: 1,
              title: "中东",
              list: ["土耳其", "迪拜", "阿布扎比", "阿联酋", "以色列"]
            },
            {
              content_id: 2,
              title: "非洲",
              list: [
                "毛里求斯",
                "塞舌尔",
                "埃及",
                "摩洛哥",
                "南非",
                "马达加斯加法属留尼汪",
                "突尼斯",
                "肯尼亚"
              ]
            }
          ],
          centerContentList: [],
          rightContentList: [],
          special: [
            {
              content_id: 0,
              name: "蜜月精选",
              introduce: "蜜月就去毛里求斯，收获100分的甜蜜！"
            },
            {
              content_id: 1,
              name: "干货",
              introduce: "绝色天堂毛里求斯，你想要的最全玩法攻略"
            }
          ]
        },
        {
          id: 6,
          title: "热门海岛",
          three:false,
          specialBln:true,
          top: false,
          hot: ["巴厘岛", "普吉岛", "塞班", "斐济"],
          letfContentList: [
            {
              content_id: 0,
              title: "当季热门",
              list: [
                "普吉岛",
                "巴厘岛",
                "苏梅岛",
                "塞班岛",
                "长滩岛",
                "斐济关岛",
                "夏威夷"
              ]
            },
            {
              content_id: 1,
              title: "高端奢华",
              list: ["马尔代夫", "毛里求斯", "大溪地", "塞舌尔"]
            },
            {
              content_id: 2,
              title: "马尔代夫",
              list: [
                "阿玛瑞岛",
                "库拉玛提岛",
                "双鱼岛",
                "中央格兰德伊露岛",
                "蓝色美人蕉薇拉瓦鲁岛",
                "泰姬珊瑚岛",
                "康杜玛岛",
                "波杜希蒂岛",
                "鲁滨逊岛蜜月岛",
                "奥露岛",
                "萨芙莉岛",
                "瑞提拉岛",
                "美露丽芙岛",
                "吉哈德岛",
                "神仙珊瑚岛",
                "都喜天阙AKV安娜塔拉吉哈瓦岛",
                "奥特瑞格科诺塔第六感拉姆岛",
                "四季库达呼拉岛",
                "阿雅达岛",
                "卓美亚维塔维丽岛",
                "柏悦哈达哈奥臻岛",
                "瑞喜敦岛",
                "莉莉岛",
                "港丽岛",
                "玛娜法鲁岛",
                "香格里拉岛",
                "博瑞哈达哈岛",
                "尼亚玛岛",
                "宁静岛",
                "四季兰达吉拉瓦鲁岛",
                "白马庄园卓美亚德瓦纳芙希岛",
                "芙花芬岛",
                "维拉私人岛",
                "蕉叶岛",
                "艾布度岛",
                "安嘎嘎岛",
                "白金岛",
                "卡尼岛",
                "班度士岛",
                "库达富士岛",
                "芙拉瓦丽岛"
              ]
            }
          ],
          centerContentList: [],
          rightContentList: [],
          special: [
            {
              content_id: 0,
              name: "避霾去哪儿？",
              introduce: "远离雾霾，去斐济迎接世界第一缕阳光"
            },
            {
              content_id: 1,
              name: "自驾天堂！",
              introduce: "如果没有自驾，那你就白来塞班了！"
            },
            {
              content_id: 2,
              name: "省钱秘籍大公开",
              introduce: "想在巴厘岛住得高端又实惠？"
            }
          ]
        }
      ];
      this.sideNavList = getSideNavList;
    },
    onNavGroup(i) {
      this.count = i;
    },
    offNavGroup() {
      this.count = null;
    }
  },
  mounted() {
    this.getData();
  }
};
</script>

<style lang="stylus" scoped>
.navView {
  position: relative;
  width: 258px;

  &:last-child {
    box-shadow: inset 0 -2px #ffa500;
  }

  .navGroup {
    width: 256px;
    height: 68px;
    display: flex;
    align-items: center;
    border-left: 2px solid orange;
    border-right: 2px solid #ffa500;
    box-shadow: inset 0 1px #eee;

    .icon1 {
      width: 28px;
      height: 32px;
      background-image: url('http://css.mafengwo.net/images/sales/global-icon4.png');
      display: inline-block;
      margin: 0 15px;
    }

    .content {
      width: 173px;

      .title {
        margin-bottom: 5px;
      }

      .placeGroup {
        font-size: 13px;
        color: #777;

        .place {
          padding-right: 5px;

          &:hover {
            color: orange;
            text-decoration: underline;
          }
        }
      }
    }
  }

  .isNavGroup {
    &:before {
      content: '';
      width: 4px;
      height: 65px;
      background-color: #fff;
      position: absolute;
      right: -2px;
      top: 2px;
      z-index: 88;
    }

    &:after {
      content: '';
      width: 100%;
      height: 100%;
      background-color: transition;
      box-shadow: inset 0 2px #ffa500, inset 0 -2px #ffa500;
      position: absolute;
      bottom: 0px;
    }
  }

  .navAll {
    width: 745  px;
    border: 2px solid orange;
    left: 256px;
    position: absolute;
    background-color: #fff;
    padding: 33px;
    box-sizing: border-box;
    display: flex;
    justify-content: space-between;
    z-index: 77;

    .top {
      width: 340px;

      .list {
        display: flex;
        margin-bottom: 15px;

        .title {
          font-weight: bold;
          font-size: 15px;
          white-space: nowrap;
        }

        .content {
          font-size: 13px;
          margin-left: 20px;

          a {
            margin-right: 10px;
            margin-bottom: 4px;
            display: inline-block;
            position: relative;

            &:before {
              content: '';
              width: 1px;
              height: 12px;
              background-color: #eee;
              position: absolute;
              right: -6px;
              top: 3px;
            }

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .left {
      width: 360px;

      .list {
        margin-bottom: 30px;

        .title {
          display: block;
          font-weight: bold;
          padding-bottom: 5px;
          border-bottom: 1px solid #eee;
        }

        .content {
          font-size: 13px;
          margin-top: 5px;

          a {
            margin-right: 10px;
            margin-bottom: 4px;
            display: inline-block;
            position: relative;

            &:before {
              content: '';
              width: 1px;
              height: 12px;
              background-color: #eee;
              position: absolute;
              right: -6px;
              top: 3px;
            }

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .center {
      width: 190px;

      .list {
        height: 120px;

        .title {
          display: block;
          font-weight: bold;
          padding-bottom: 5px;
          border-bottom: 1px solid #eee;
        }

        .content {
          font-size: 13px;
          margin-top: 5px;

          a {
            margin-right: 10px;
            margin-bottom: 4px;
            display: inline-block;
            position: relative;

            &:before {
              content: '';
              width: 1px;
              height: 12px;
              background-color: #eee;
              position: absolute;
              right: -6px;
              top: 3px;
            }

            &:hover {
              text-decoration: underline;
            }
          }
        }
      }
    }

    .special {
      display: flex;
      flex-direction: column;
      width 260px

      .title {
        font-weight: bold;
      }

      a {
        font-size: 12px;
        margin-top: 20px;

        .name {
          display: inherit;
          padding-bottom: 3px;
        }

        .introduce {
          color: #555;
        }
      }
    }
  }
}

.topNav {
  &:before {
    content: '';
    width: 100%;
    height: 2px;
    background-color: #ffa500;
    position: absolute;
    top: 0px;
  }
}
</style>